<!DOCTYPE html>
<html>
<head>
    <title>直播监控</title>
    <#include "/header.html">
</head>
<body>
<div id="webpage" v-cloak>
    <div v-show="appearance.showList">
        <div v-show="appearance.showControllBar" class="grid-btn">
            <span v-show="appearance.showSearchForm">
                <div class="form-group col-sm-2">
                    <input type="text" class="form-control" v-model="q._keyword" @keyup.enter="query" placeholder="昵称">
                </div>
                <a class="btn btn-default" @click="query">查询</a>
            </span>

            <div v-if="records.list <= 0" style="padding: 5% 0px; text-align: center">
                当前没有任何直播
            </div>
            <div class="records">
                <div class="datalist row">
                    <div v-for="(v,i) in records.list" class="col-sm-1 col-md-2 item">
                        <div class="thumbnail">
                            <div class="image">
                                <img @click="preview(v)" :id="'IMG_PREVIEW_' + v.uid" :src="v.snapshotImage || v.coverImage">
                            </div>
                            <div class="caption" >
                                <h5>{{v.title}}</h5>
                                <p>{{v.nickname}} ${r"#"}{{v.uid}}</p>
                                <p class="actions">
                                    <a href="javascript:;" @click="preview(v)" class="btn btn-xs btn-success" role="button">直播预览</a>
                                    <a href="javascript:;" @click="forbidden(v)" class="btn btn-xs btn-danger" role="button">禁止直播</a>
                                    <a href="javascript:;" class="btn btn-xs btn-info" role="button">查看详情</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <el-pagination
                        @current-change="selectPage"
                        :page-sizes="[12, 24, 36, 48]"
                        :page-size="records.pageSize"
                        :page-count="records.totalPage"
                        :current-page.sync="records.currPage"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="records.total">
                </el-pagination>
            </div>

        </div>
    </div>
</div>
<script type="js/tpl" id="tpl_live_player">
    <div id="live_video_player">
        <div id="video"></div>
    </div>
</script>
<style type="text/css">
    .datalist{border:solid 0px #fff;}
    .datalist .caption h3{margin: 0px;}
    .datalist .caption p{margin: 10px 0;}
    .datalist .thumbnail{border:solid 1px #dbdbdb;}
    .datalist .image{overflow: hidden; height: 280px; border-bottom: solid 1px #dbdbdb;}
    .datalist .image img{width: 100%; cursor: pointer}
    .datalist .actions{}
    .datalist .actions a{display: inline-block; margin-right:10px;}
</style>
<script src="${request.contextPath}/statics/js/modules/live/monitor.js?_${.now?long}"></script>
</body>
</html>